<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="utf-8" />
		<title>角色列表 - 权限管理</title>
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
		<link   rel="icon" href="${base}/favicon.ico" type="image/x-icon" />
		<link   rel="shortcut icon" href="${base}/favicon.ico" />
		<link href="${base}/js/common/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
		<link href="${base}/css/common/base.css" rel="stylesheet"/>
		<link rel="stylesheet" href="${base}/css/zTreeStyle/zTreeStyle.css" type="text/css">
		<script  src="${base}/js/common/jquery/jquery1.8.3.min.js"></script>
		<script  src="${base}/js/common/layer/layer.js"></script>
		<script  src="${base}/js/common/bootstrap/3.3.5/js/bootstrap.min.js"></script>
		<script  src="${base}/js/shiro.demo.js"></script>
		<script type="text/javascript" src="${base}/js/jquery-ztree-2.5.js"></script>
		<script >
			so.init(function(){
				//初始化全选。
				so.checkBoxInit('#checkAll','[check=box]');
				
				
				//全选
				so.id('deleteAll').on('click',function(){
					var checkeds = $('[check=box]:checked');
					if(!checkeds.length){
						return layer.msg('请选择要删除的选项。',so.default),!0;
					}
					var array = [];
					checkeds.each(function(){
						array.push(this.value);
					});
					return deleteById(array);
				});
				
			});
		
			<#--根据ID数组删除角色-->
			function deleteById(ids){
				var index = layer.confirm("确定这"+ ids.length +"个角色？",function(){
					var load = layer.load();
					$.post('${base}/role/deleteRoleById.shtml',{ids:ids.join(',')},function(result){
						layer.close(load);
						if(result && result.status != 200){
							return layer.msg(result.message,so.default),!0;
						}else{
							layer.msg(result.resultMsg);
							setTimeout(function(){
								$('#formId').submit();
							},1000);
						}
					},'json');
					layer.close(index);
				});
			}
			
			<#--添加角色-->
			function addRole(){
				var name = $('#name').val(),
					type = $('#type').val();
					desc = $('#desc').val();
				if($.trim(name) == ''){
					return layer.msg('角色名称不能为空。',so.default),!1;
				}
				if(!/^[a-z0-9A-Z]{6}$/.test(type)){
					return layer.msg('角色类型为6数字字母。',so.default),!1;
				}
				<#--loding-->
				var load = layer.load();
				$.post('${base}/role/addRole.shtml',{name:name,type:type,description:desc},function(result){
					layer.close(load);
					if(result && result.status != 200){
						return layer.msg(result.message,so.default),!1;
					}
					layer.msg('添加成功。');
					setTimeout(function(){
						$('#formId').submit();
					},1000);
				},'json');
			}
			
		</script>
	</head>
	<body data-target="#one" data-spy="scroll">
	    <#import "../common/config/top.ftl" as _top/>
	    <#import "../common/config/left.ftl" as _left/>
		<#--引入头部-->
		<@_top.top 3/>
		<div class="container" style="padding-bottom: 15px;min-height: 300px; margin-top: 40px;">
			<div class="row">
				<#--引入左侧菜单-->
				<@_left.role 1/>
				<div class="col-md-10">
					<h2>角色列表</h2>
					<hr>
					<form method="post" action="" id="formId" class="form-inline">
						<div clss="well">
					      <div class="form-group">
					        <input type="text" class="form-control" style="width: 300px;" value="${findContent?default('')}" 
					        			name="findContent" id="findContent" placeholder="输入角色类型 / 角色名称">
					      </div>
					     <span class=""> <#--pull-right -->
				         	<button type="submit" class="btn btn-primary">查询</button>
				         	
				         		<a class="btn btn-success" onclick="$('#addrole').modal();">增加角色</a>
				         	
				         	
				         		<button type="button" id="deleteAll" class="btn  btn-danger">Delete</button>
				         	
				         </span>    
				        </div>
					<hr>
					<table class="table table-bordered">
					<input type="hidden" id="selectRoleId">
						<tr>
							<th><input type="checkbox" id="checkAll"/></th>
							<th>角色名称</th>
							<th>角色描述</th>
							<th>操作</th>
						</tr>
						<#if page?exists && page.list?size gt 0 >
							<#list page.list as it>
								<tr>
									<td><input value="${it.id}" check='box' type="checkbox" /></td>
									<td>${it.name?default('-')}</td>
									<td>${it.description?default('-')}</td>
									<td>
									  <#--   <i class="glyphicon glyphicon-share-alt"></i><a href="javascript:selectRoleById(${it.id});">选择权限</a> -->
										<i class="glyphicon glyphicon-remove"></i><a href="javascript:deleteById([${it.id}]);">删除</a>
								     </td>
								</tr>
							</#list>
						<#else>
							<tr>
								<td class="text-center danger" colspan="4">没有找到角色</td>
							</tr>
						</#if>
					</table>
						<#import "../common/config/page.ftl" as _page/>
							<@_page.topage 2/>
					</form>
				</div>
			</div><#--/row-->
			
				<#--弹框-->
			<div class="modal fade bs-example-modal-sm"  id="selectPermission" tabindex="-1" role="dialog" aria-labelledby="selectPermissionLabel">
			  <div class="modal-dialog modal-sm" role="document">
			    <div class="modal-content">
			      <div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			        <h4 class="modal-title" id="selectPermissionLabel">添加权限</h4>
			      </div>
			      <ul id="tree" class="tree" style="width:230px; overflow:auto;"></ul>
			      <div class="modal-body">
			        <form id="boxRoleForm">
			           
			          loading...
			        </form>
			      </div>
			      <div class="modal-footer">
			        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
			        <button type="button" onclick="selectPermission();" class="btn btn-primary">Save</button>
			      </div>
			    </div>
			  </div>
			</div>
			<#--/弹框-->
				<#--添加弹框-->
				<div class="modal fade" id="addrole" tabindex="-1" role="dialog" aria-labelledby="addroleLabel">
				  <div class="modal-dialog" role="document">
				    <div class="modal-content">
				      <div class="modal-header">
				        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				        <h4 class="modal-title" id="addroleLabel">添加角色</h4>
				      </div>
				      <div class="modal-body">
				        <form id="boxRoleForm">
				          <div class="form-group">
				            <label for="recipient-name" class="control-label">角色名称:</label>
				            <input type="text" class="form-control" name="name" id="name" placeholder="请输入角色名称"/>
				          </div>
				          <div class="form-group">
				            <label for="recipient-name" class="control-label">角色类型:</label>
				            <input type="text" class="form-control" id="type" name="type"  placeholder="请输入角色类型  [字母 + 数字] 6位">
				          </div>
				          <div class="form-group">
				            <label for="recipient-name" class="control-label">角色描述:</label>
				            <input type="text" class="form-control" id="desc" name="description"  placeholder="请输入对角色的介绍">
				          </div>
				        </form>
				      </div>
				      <div class="modal-footer">
				        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
				        <button type="button" onclick="addRole();" class="btn btn-primary">Save</button>
				      </div>
				    </div>
				  </div>
				</div>
				<#--/添加弹框-->
				
			
		</div>
			
	</body>
</html>
<script>
 var setting = {
        checkable: true,
		isSimpleData: true,
		treeNodeKey: "id",
		treeNodeParentKey: "pid",
		showLine: true,
		root:{ 
			isRoot:true,
			nodes:[]
		}
	};

	zNodes =[
		
		{ id:3, pId:0, name:"zTree 功能演示", open:true},
		{ id:31, pId:3, name:"基本功能演示", open:true},
		{ id:311, pId:31, name:"不兼容 IE6", "url":"standardDemo.html", "target":"testIframe"},
		{ id:311, pId:31, name:"兼容 IE6", "url":"standardDemoForIe6.html", "target":"testIframe"},
		{ id:32, pId:3, name:"check 演示", open:true},
		{ id:321, pId:32, name:"CheckBox演示", "url":"checkboxDemo.html", "target":"testIframe"},
		{ id:321, pId:32, name:"Radio演示", "url":"radioDemo.html", "target":"testIframe"},
		{ id:33, pId:3, name:"异步加载演示", "url":"asyncDemo.html", "target":"testIframe"},
		{ id:34, pId:3, name:"事件演示", "url":"eventDemo.html", "target":"testIframe"},
		{ id:35, pId:3, name:"编辑演示", open:true},
		{ id:351, pId:35, name:"默认编辑", "url":"editDemo.html", "target":"testIframe"},
		{ id:352, pId:35, name:"编辑 & 异步加载 共存", "url":"edit&asyncDemo.html", "target":"testIframe"},
		{ id:36, pId:3, name:"JS操作", "url":"jscontrolDemo.html", "target":"testIframe"},
		{ id:39, pId:3, name:"大数据量演示", open:true},
		{ id:391, pId:39, name:"普通加载", "url":"bigDataDemo_normal.html", "target":"testIframe"},
		{ id:392, pId:39, name:"高级异步加载", "url":"bigDataDemo_super.html", "target":"testIframe"},
		{ id:37, pId:3, name:"高级应用演示", open:true},
		{ id:371, pId:37, name:"两棵树的数据交换", "url":"superDemo_mutilTree.html", "target":"testIframe"},
		{ id:372, pId:37, name:"添加自定义控件", "url":"superDemo_diyBtn.html", "target":"testIframe"},
		{ id:375, pId:37, name:"checkbox & radio 共存", "url":"superDemo_check&radio.html", "target":"testIframe"},
		{ id:373, pId:37, name:"右键菜单", "url":"superDemo_rightMenu.html", "target":"testIframe"},
		{ id:374, pId:37, name:"下拉菜单", "url":"superDemo_dropdownMenu.html", "target":"testIframe"},
		{ id:38, pId:3, name:"皮肤演示", url:"http://baby666.cn/hunter/ztree/skinDemo.html", target:"testIframe"}
	];

      $(function(){
      	

      });
/**根据角色ID选择权限，分配权限操作。*/
			var zTree;
			function selectRoleById(id){
				var load = layer.load();
				$.post("privilegeAction_showPrivlegeTreeByRid.action",{rid:id},function(result){
					layer.close(load);
					if(result && result.length){
						var html =[];
						
						zTree = $("#tree").zTree(setting, result);
						//zTree.expandAll(true);
						//var node=zTree.getNodeByParam("isParent",true,null);
						//zTree.expandNode(node,true,true,true);
						
						/**$.each(result,function(i,obj){
						   
							html.push("<div class='checkbox'><label>");
							html.push("<input type='checkbox' id='");
							html.push(this.id);
							html.push("'");
							if(this.checked==true){
								html.push(" checked='checked'");
							}
							html.push("name='");
							html.push(this.name);
							html.push("'/>");
							html.push(this.name);
							html.push('</label></div>');
							
						});*/
						return so.id('boxRoleForm').html(html.join('')) & $('#selectPermission').modal(),$('#selectRoleId').val(id),!1;
					}else{
						return layer.msg("执行错误！",so.default1);
					}
				},'json');
			}
			<#--选择权限后保存-->
			function selectPermission(){
				//var checked = $(":checked");
				var checkedNodes = zTree.getCheckedNodes(true);
				var ids=[],names=[];
				$.each(checkedNodes,function(){
				   
					ids.push(this.id);
					names.push($.trim($(this).attr('name')));
				});
				var index = layer.confirm("确定操作？",function(){
					<#--loding-->
					var load = layer.load();
					$.post('roleAction_buildRoleAndPrivilege.action',{checkedStr:ids.join(','),rid:$('#selectRoleId').val()},function(result){
						layer.close(load);
						if(result && result.status != 200){
							return layer.msg(result.message,so.default),!1;
						}
						layer.msg('添加成功。');
						setTimeout(function(){
							$('#formId').submit();
						},1000);
					},'json');
				});
			}
			
</script>